<template>
	<view class="container">
		<!-- 出库单扫描区域 -->
		<view class="scan-section">
			<view class="input-wrapper">
				<input 
					class="query-input" 
					type="text" 
					v-model="issueCode" 
					placeholder="扫描出库单号"
					@confirm="handleIssueCodeConfirm"
				/>
				<view class="input-icon scan-icon" @click="startScanIssueCode">
					<uni-icons type="scan" size="16" color="#28a745"></uni-icons>
				</view>
				<view class="input-icon clear-icon" @click="clearIssueCode" v-if="issueCode">
					<uni-icons type="clear" size="16" color="#999"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 出库单信息显示 -->
		<view class="issue-info" v-if="issueInfo">
			<view class="info-header">
				<text class="info-title">出库单信息</text>
				<text class="info-status" :class="getStatusClass(issueInfo.status)">{{ getStatusText(issueInfo.status) }}</text>
			</view>
			<view class="info-content">
				<view class="info-row">
					<text class="label">出库单号：</text>
					<text class="value">{{ issueInfo.issueCode }}</text>
				</view>
				<view class="info-row">
					<text class="label">出库类型：</text>
					<text class="value">{{ getMiscTypeText(issueInfo.miscType) }}</text>
				</view>
			</view>
		</view>

		<!-- 执行出库按钮 -->
		<view class="execute-section" v-if="issueInfo">
			<view class="execute-info">
				<text class="execute-title">准备出库</text>
				<text class="execute-desc">选择物料行，输入SN码或批次后执行出库</text>
			</view>
			<button class="btn btn-execute" @click="startExecuteOutbound" :disabled="!canExecute">
				<text>✓</text>
				开始出库
			</button>
		</view>

		<!-- 物料行选择提示 -->
		<view class="material-select-section" v-if="issueLines.length > 0 && !selectedLine">
			<view class="select-tip">
				<text class="tip-title">请选择要录入的物料行</text>
				<text class="tip-desc">点击下方表格中的任意一行开始录入</text>
			</view>
		</view>

		<!-- 当前选中物料信息 -->
		<view class="selected-material-section" v-if="selectedLine">
			<view class="material-header">
				<text class="material-title">当前选中物料</text>
				<view class="material-actions">
					<button class="btn btn-small btn-secondary" @click="clearSelection">
						<text>✕</text>
						取消选择
					</button>
				</view>
			</view>
			<view class="material-info">
				<view class="info-row">
					<text class="label">物料编码:</text>
					<text class="value">{{ selectedLine.itemCode }}</text>
				</view>
				<view class="info-row">
					<text class="label">物料名称:</text>
					<text class="value">{{ selectedLine.itemName }}</text>
				</view>
				<view class="info-row">
					<text class="label">规格型号:</text>
					<text class="value">{{ selectedLine.specification }}</text>
				</view>
				<view class="info-row">
					<text class="label">出库数量:</text>
					<text class="value">{{ selectedLine.quantityIssue }}</text>
				</view>
			</view>
		</view>

		<!-- 出库明细表格 -->
		<view class="details-section" v-if="issueLines.length > 0">
			<view class="section-header">
				<text class="section-title">出库明细</text>
				<text class="section-count">共{{ issueLines.length }}行</text>
			</view>

			<view class="details-table">
				<view class="table-header">
					<text class="table-cell">物料编码</text>
					<text class="table-cell">物料名称</text>
					<text class="table-cell">规格型号</text>
					<text class="table-cell">出库数量</text>
					<text class="table-cell">仓库</text>
					<text class="table-cell">已扫描</text>
					<text class="table-cell">状态</text>
				</view>
				<view class="table-body">
					<view 
						v-for="line in issueLines" 
						:key="line.lineId" 
						class="table-row"
						:class="{ 'selected': selectedLine && selectedLine.lineId === line.lineId }"
						@click="selectLine(line)"
					>
						<text class="table-cell">{{ line.itemCode }}</text>
						<text class="table-cell">{{ line.itemName }}</text>
						<text class="table-cell">{{ line.specification }}</text>
						<text class="table-cell">{{ line.quantityIssue }}</text>
						<text class="table-cell">{{ line.warehouseName }}</text>
						<text class="table-cell scanned-cell">
							<text class="scanned-text">
								{{ line.scannedDetailCount || 0 }}/{{ line.quantityIssue }}
							</text>
						</text>
						<text class="table-cell status-cell">
							<text 
								class="status-text" 
								:class="getLineStatusClass(line)"
							>
								{{ getLineStatusText(line) }}
							</text>
						</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 物料录入区域 -->
		<view class="material-input-section" v-if="selectedLine">
			<view class="input-header">
				<text class="input-title">物料录入</text>
				<text class="input-subtitle">{{ selectedLine.itemName }}</text>
			</view>
			
			<!-- 仓位选择 -->
			<view class="location-section">
				<view class="input-row">
					<view class="input-label">
						<text class="input-title">选择仓位</text>
						<text class="input-required">*</text>
					</view>
					<view class="input-wrapper">
						<warehouse 
							:warehouse-display-mode="warehouseDisplayMode"
							:location-display-mode="locationDisplayMode" 
							:area-display-mode="areaDisplayMode"
							:scanned-area-code="scannedAreaCode" 
							@selected="onWarehouseSelected" 
						/>
					</view>
				</view>
			</view>
			
			<!-- 数量输入 -->
			<view class="quantity-section">
				<view class="input-row">
					<view class="input-label">
						<text class="input-title">出库数量</text>
						<text class="input-required">*</text>
					</view>
					<view class="input-wrapper">
						<input 
							class="quantity-input-field" 
							type="number" 
							v-model="currentQuantity" 
							placeholder="请输入出库数量"
							:max="selectedLine.quantityIssue"
						/>
						<text class="quantity-unit">{{ selectedLine.unitName || '个' }}</text>
					</view>
				</view>
				<view class="quantity-info">
					<text class="quantity-tip">最大数量: {{ selectedLine.quantityIssue }} {{ selectedLine.unitName || '个' }}</text>
				</view>
			</view>
			
			<!-- SN录入 -->
			<view class="sn-input-section">
				<view class="input-row">
					<view class="input-label">
						<text class="input-title">SN码录入</text>
					</view>
					<view class="input-wrapper">
						<input 
							class="sn-input" 
							v-model="currentSnInput" 
							placeholder="扫描或输入SN码"
						/>
						<view class="input-icon scan-icon" @click="startScanSn">
							<uni-icons type="scan" size="16" color="#28a745"></uni-icons>
						</view>
						<view class="input-icon clear-icon" @click="clearSnInput" v-if="currentSnInput">
							<uni-icons type="clear" size="16" color="#999"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 批次录入 -->
			<view class="batch-input-section">
				<view class="input-row">
					<view class="input-label">
						<text class="input-title">批次录入</text>
					</view>
					<view class="input-wrapper">
						<input 
							class="batch-input-field" 
							v-model="currentBatchInput" 
							placeholder="扫描或输入批次号"
						/>
						<view class="input-icon scan-icon" @click="startScanBatch">
							<uni-icons type="scan" size="16" color="#28a745"></uni-icons>
						</view>
						<view class="input-icon clear-icon" @click="clearBatchInput" v-if="currentBatchInput">
							<uni-icons type="clear" size="16" color="#999"></uni-icons>
						</view>
					</view>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="input-actions">
				<button class="btn btn-next" @click="selectNextLine">
					下一个物料
				</button>
				<button class="btn btn-save" @click="saveCurrentData" :disabled="!canSaveCurrentData">
					保存当前数据
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { getMiscIssueByCode, batchSaveMiscIssueBySn, executeMiscIssueMobile } from '@/api/wm/miscissue'
import warehouse from '@/pages/app/inbound/common/warehouse/warehouse.vue'

export default {
	name: 'MiscOutbound',
	components: {
		warehouse
	},
	data() {
		return {
			issueCode: '',
			issueInfo: null,
			issueLines: [],
			selectedLine: null,
			errorMessage: '',
			isExecuting: false,
			
			// 当前输入
			currentQuantity: 1,
			currentSnInput: '',
			currentBatchInput: '',
			
			// 仓位选择
			warehouseDisplayMode: 'code',
			locationDisplayMode: 'code',
			areaDisplayMode: 'code',
			scannedAreaCode: '',
			selectedWarehouseInfo: {},
			selectedLocationText: '',
			
			// 已保存的行
			savedLines: new Set()
		}
	},
	
	computed: {
		// 是否可以保存当前数据
		canSaveCurrentData() {
			return this.selectedWarehouseInfo && 
			       this.selectedWarehouseInfo.warehouseId &&
			       this.currentQuantity > 0 &&
			       (this.currentSnInput.trim() !== '' || this.currentBatchInput.trim() !== '')
		},
		
		// 是否可以执行出库
		canExecute() {
			const lineId = this.selectedLine?.recptLineId || this.selectedLine?.lineId || this.selectedLine?.id
			return this.issueInfo && 
			       this.issueInfo.status === 'APPROVED' &&
			       this.savedLines.size > 0
		}
	},
	
	methods: {
		// 开始扫描出库单号
		startScanIssueCode() {
			// PDA扫描逻辑
			console.log('开始扫描出库单号')
		},
		
		// 清空出库单号
		clearIssueCode() {
			this.issueCode = ''
			this.issueInfo = null
			this.issueLines = []
			this.selectedLine = null
			this.savedLines.clear()
		},
		
		// 确认出库单号
		async handleIssueCodeConfirm() {
			if (!this.issueCode.trim()) {
				uni.showToast({
					title: '请输入出库单号',
					icon: 'none'
				})
				return
			}
			
			try {
				uni.showLoading({ title: '查询中...' })
				this.errorMessage = ''
				
				const response = await getMiscIssueByCode(this.issueCode.trim())
				console.log('查询出库单响应:', response)
				
				if (response.code === 200) {
					// 新的API返回格式包含出库单信息和行数据
					this.issueInfo = {
						issueId: response.data.issueId,
						issueCode: response.data.issueCode,
						miscType: response.data.miscType,
						issueType: response.data.issueType,
						status: response.data.status,
						issueDate: response.data.issueDate,
						remark: response.data.remark
					}
					
					// 直接使用API返回的行数据（包含已扫描明细数量）
					this.issueLines = response.data.lines || []
					
					console.log('出库单信息:', this.issueInfo)
					console.log('出库单行数据:', this.issueLines)
				} else {
					this.errorMessage = response.msg || '查询失败'
					console.error('查询失败:', this.errorMessage)
				}
			} catch (error) {
				console.error('查询出库单失败:', error)
				this.errorMessage = '查询失败: ' + error.message
			} finally {
				uni.hideLoading()
			}
		},
		
		// 选择物料行
		selectLine(line) {
			this.selectedLine = line
			this.currentQuantity = 1
			this.currentSnInput = ''
			this.currentBatchInput = ''
			this.selectedWarehouseInfo = {}
			this.selectedLocationText = ''
		},
		
		// 清除选择
		clearSelection() {
			this.selectedLine = null
			this.currentQuantity = 1
			this.currentSnInput = ''
			this.currentBatchInput = ''
			this.selectedWarehouseInfo = {}
			this.selectedLocationText = ''
		},
		
		// 仓位选择回调
		onWarehouseSelected(warehouseInfo) {
			this.selectedWarehouseInfo = warehouseInfo
			this.selectedLocationText = `${warehouseInfo.warehouseName}-${warehouseInfo.locationName}-${warehouseInfo.areaName}`
		},
		
		// 开始扫描SN
		startScanSn() {
			console.log('开始扫描SN')
		},
		
		// 清空SN输入
		clearSnInput() {
			this.currentSnInput = ''
		},
		
		// 开始扫描批次
		startScanBatch() {
			console.log('开始扫描批次')
		},
		
		// 清空批次输入
		clearBatchInput() {
			this.currentBatchInput = ''
		},
		
		// 保存当前数据
		async saveCurrentData() {
			if (!this.canSaveCurrentData) {
				uni.showToast({
					title: '请完成数量和SN/批次录入',
					icon: 'none'
				})
				return
			}

			try {
				uni.showLoading({ title: '保存中...' })
				
				const snValue = this.currentSnInput.trim()
				const batchValue = this.currentBatchInput.trim()
				const quantity = this.currentQuantity

				const detail = {
					lineId: this.selectedLine.lineId,
					issueId: this.issueInfo.issueId,
					itemId: this.selectedLine.itemId,
					itemCode: this.selectedLine.itemCode,
					itemName: this.selectedLine.itemName,
					specification: this.selectedLine.specification,
					unitOfMeasure: this.selectedLine.unitOfMeasure,
					unitName: this.selectedLine.unitName,
					quantity: quantity,
					sn: snValue || null,
					batchCode: batchValue || null,
					warehouseId: this.selectedWarehouseInfo.warehouseId,
					warehouseCode: this.selectedWarehouseInfo.warehouseCode,
					warehouseName: this.selectedWarehouseInfo.warehouseName,
					locationId: this.selectedWarehouseInfo.locationId,
					locationCode: this.selectedWarehouseInfo.locationCode,
					locationName: this.selectedWarehouseInfo.locationName,
					areaId: this.selectedWarehouseInfo.areaId,
					areaCode: this.selectedWarehouseInfo.areaCode,
					areaName: this.selectedWarehouseInfo.areaName,
					remark: ''
				}

				console.log('保存明细数据:', detail)

				const response = await batchSaveMiscIssueBySn({
					detailList: [detail]
				})

				console.log('保存响应:', response)

				if (response.code === 200) {
					uni.showToast({
						title: response.msg,
						icon: 'success'
					})
					
					// 标记为已保存
					const lineId = this.selectedLine.lineId
					this.savedLines.add(lineId)
					
					// 清空输入
					this.currentQuantity = 1
					this.currentSnInput = ''
					this.currentBatchInput = ''
					
				} else {
					throw new Error(response.msg || '保存失败')
				}
			} catch (error) {
				console.error('保存出库明细失败:', error)
				uni.showToast({
					title: '保存失败: ' + error.message,
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		// 选择下一个物料
		selectNextLine() {
			if (!this.issueLines || this.issueLines.length === 0) {
				return
			}
			
			const currentIndex = this.issueLines.findIndex(line => 
				line.lineId === this.selectedLine?.lineId
			)
			
			if (currentIndex < this.issueLines.length - 1) {
				this.selectLine(this.issueLines[currentIndex + 1])
			} else {
				uni.showToast({
					title: '已是最后一个物料',
					icon: 'none'
				})
			}
		},
		
		// 开始执行出库
		async startExecuteOutbound() {
			if (!this.canExecute) {
				uni.showToast({
					title: '请先完成物料录入',
					icon: 'none'
				})
				return
			}

			uni.showModal({
				title: '确认出库',
				content: '确定要执行出库吗？',
				success: async (res) => {
					if (res.confirm) {
						await this.executeOutbound()
					}
				}
			})
		},
		
		// 执行出库
		async executeOutbound() {
			try {
				uni.showLoading({ title: '出库中...' })
				this.isExecuting = true
				
				const response = await executeMiscIssueMobile(this.issueInfo.issueId)
				
				if (response.code === 200) {
					uni.showToast({
						title: '出库执行成功',
						icon: 'success'
					})
					
					// 重新查询出库单信息
					await this.handleIssueCodeConfirm()
					
					// 清除选中状态
					this.clearSelection()
					this.savedLines.clear()
				} else {
					throw new Error(response.msg || '出库执行失败')
				}
			} catch (error) {
				console.error('执行出库失败:', error)
				uni.showToast({
					title: '执行失败: ' + error.message,
					icon: 'none',
					duration: 3000
				})
			} finally {
				uni.hideLoading()
				this.isExecuting = false
			}
		},
		
		// 获取状态样式类
		getStatusClass(status) {
			const statusMap = {
				'PREPARE': 'status-prepare',
				'APPROVED': 'status-approved',
				'COMPLETE': 'status-complete'
			}
			return statusMap[status] || 'status-prepare'
		},
		
		// 获取状态文本
		getStatusText(status) {
			const statusMap = {
				'PREPARE': '待审批',
				'APPROVED': '已审批',
				'COMPLETE': '已完成'
			}
			return statusMap[status] || '未知状态'
		},
		
		// 获取出库类型文本
		getMiscTypeText(miscType) {
			const typeMap = {
				'01': '其他出库',
				'02': '销售出库',
				'03': '客户退货出库',
				'04': '借出出库',
				'05': '盘亏出库',
				'06': '调拨出库',
				'07': '生产领料出库'
			}
			return typeMap[miscType] || miscType || '未知类型'
		},
		
		// 获取行的状态样式
		getLineStatusClass(line) {
			const lineId = line.lineId
			const isSaved = this.savedLines.has(lineId)
			
			if (isSaved) {
				return 'status-completed'
			}
			return 'status-pending'
		},
		
		// 获取行的状态文本
		getLineStatusText(line) {
			const lineId = line.lineId
			const isSaved = this.savedLines.has(lineId)
			
			if (isSaved) {
				return '已录入'
			}
			return '待录入'
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f7fa;
	padding: 20rpx;
	padding-bottom: 100rpx;
}

/* 扫描区域 */
.scan-section {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	
	.input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
	}
	
	.query-input {
		flex: 1;
		height: 80rpx;
		padding: 0 120rpx 0 20rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
		background: #fff;
		box-sizing: border-box;
		
		&:focus {
			border-color: #007AFF;
			box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
		}
	}
	
	.input-icon {
		position: absolute;
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		cursor: pointer;
		transition: all 0.3s;
		
		&:active {
			background: rgba(0,0,0,0.05);
			transform: scale(0.9);
		}
	}
	
	.scan-icon {
		right: 60rpx;
		background: rgba(0,122,255,0.08);
	}
	
	.clear-icon {
		right: 16rpx;
	}
}

/* 出库单信息 */
.issue-info {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	
	.info-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	.info-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.info-status {
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: bold;
		
		&.status-prepare {
			background: #fff3cd;
			color: #856404;
		}
		
		&.status-approved {
			background: #d1ecf1;
			color: #0c5460;
		}
		
		&.status-complete {
			background: #d4edda;
			color: #155724;
		}
	}
	
	.info-content {
		.info-row {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.label {
				font-size: 28rpx;
				color: #666;
				width: 180rpx;
			}
			
			.value {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
		}
	}
}

/* 执行出库按钮 */
.execute-section {
	background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
	
	.execute-info {
		margin-bottom: 24rpx;
	}
	
	.execute-title {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 8rpx;
	}
	
	.execute-desc {
		display: block;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.9);
	}
	
	.btn-execute {
		width: 100%;
		height: 88rpx;
		background: #fff;
		color: #007AFF;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: bold;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		
		&:active {
			opacity: 0.8;
		}
		
		&:disabled {
			background: #ccc;
			color: #999;
		}
	}
}

/* 物料选择提示 */
.material-select-section {
	background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	
	.select-tip {
		text-align: center;
	}
	
	.tip-title {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		color: #E65100;
		margin-bottom: 8rpx;
	}
	
	.tip-desc {
		display: block;
		font-size: 24rpx;
		color: #F57C00;
	}
}

/* 当前选中物料 */
.selected-material-section {
	background: #E3F2FD;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	border: 2rpx solid #2196F3;
	
	.material-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}
	
	.material-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #1976D2;
	}
	
	.material-actions {
		display: flex;
		gap: 16rpx;
	}
	
	.material-info {
		.info-row {
			display: flex;
			align-items: center;
			margin-bottom: 12rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.label {
				font-size: 24rpx;
				color: #666;
				width: 160rpx;
			}
			
			.value {
				flex: 1;
				font-size: 24rpx;
				color: #333;
				font-weight: 500;
			}
		}
	}
}

/* 明细表格 */
.details-section {
	margin-bottom: 30rpx;
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		margin-bottom: 16rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.section-count {
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.details-table {
		background: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		
		.table-header {
			display: flex;
			background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
			padding: 24rpx 20rpx;
			min-width: 1200rpx;
			
			.table-cell {
				flex: 1;
				font-size: 24rpx;
				font-weight: bold;
				color: #fff;
				text-align: center;
				min-width: 120rpx;
				
				&:nth-child(1) { flex: 1.5; min-width: 160rpx; }
				&:nth-child(2) { flex: 2; min-width: 180rpx; }
				&:nth-child(3) { flex: 1.8; min-width: 200rpx; }
				&:nth-child(4) { flex: 1; min-width: 100rpx; }
				&:nth-child(5) { flex: 1.2; min-width: 120rpx; }
				&:nth-child(6) { flex: 1; min-width: 100rpx; }
				&:nth-child(7) { flex: 1; min-width: 100rpx; }
			}
		}
		
		.table-body {
			overflow-x: auto;
			
			.table-row {
				display: flex;
				padding: 24rpx 20rpx;
				border-bottom: 2rpx solid #f0f0f0;
				min-width: 1200rpx;
				transition: background 0.3s;
				
				&:active {
					background: #f5f7fa;
				}
				
				&.selected {
					background: #E3F2FD;
					border-left: 6rpx solid #2196F3;
				}
				
				&:last-child {
					border-bottom: none;
				}
				
				.table-cell {
					flex: 1;
					font-size: 24rpx;
					color: #333;
					text-align: center;
					min-width: 120rpx;
					word-break: break-all;
					
					&:nth-child(1) { flex: 1.5; min-width: 160rpx; }
					&:nth-child(2) { flex: 2; min-width: 180rpx; }
					&:nth-child(3) { flex: 1.8; min-width: 200rpx; }
					&:nth-child(4) { flex: 1; min-width: 100rpx; }
					&:nth-child(5) { flex: 1.2; min-width: 120rpx; }
					&:nth-child(6) { flex: 1; min-width: 100rpx; }
					&:nth-child(7) { flex: 1; min-width: 100rpx; }
				}
				
				.status-cell {
					.status-text {
						padding: 4rpx 12rpx;
						border-radius: 12rpx;
						font-size: 22rpx;
						font-weight: bold;
						
						&.status-pending {
							background: #fff3cd;
							color: #856404;
						}
						
						&.status-completed {
							background: #d4edda;
							color: #155724;
						}
					}
				}
			}
		}
	}
}

/* 物料录入区域 */
.material-input-section {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	
	.input-header {
		margin-bottom: 30rpx;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	.input-title {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}
	
	.input-subtitle {
		display: block;
		font-size: 24rpx;
		color: #999;
	}
	
	.location-section,
	.quantity-section,
	.sn-input-section,
	.batch-input-section {
		margin-bottom: 30rpx;
		
		.input-row {
			.input-label {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				
				.input-title {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
				
				.input-required {
					color: #ff0000;
					margin-left: 8rpx;
					font-size: 28rpx;
				}
			}
			
			.input-wrapper {
				position: relative;
			}
		}
		
		.quantity-input-field,
		.sn-input,
		.batch-input-field {
			width: 100%;
			height: 80rpx;
			padding: 0 100rpx 0 20rpx;
			border: 2rpx solid #e0e0e0;
			border-radius: 12rpx;
			box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
			background: #fff;
			box-sizing: border-box;
			
			&:focus {
				border-color: #007AFF;
				box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
			}
		}
		
		.quantity-unit {
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: 24rpx;
			color: #999;
		}
		
		.input-icon {
			position: absolute;
			width: 48rpx;
			height: 48rpx;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			cursor: pointer;
			transition: all 0.3s;
			
			&:active {
				background: rgba(0,0,0,0.05);
				transform: translateY(-50%) scale(0.9);
			}
		}
		
		.scan-icon {
			right: 60rpx;
			background: rgba(0,122,255,0.08);
		}
		
		.clear-icon {
			right: 16rpx;
		}
		
		.quantity-info {
			margin-top: 12rpx;
			
			.quantity-tip {
				font-size: 22rpx;
				color: #999;
			}
		}
	}
	
	.input-actions {
		display: flex;
		gap: 20rpx;
		margin-top: 40rpx;
		
		.btn {
			flex: 1;
			height: 88rpx;
			border-radius: 12rpx;
			font-size: 28rpx;
			font-weight: bold;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			transition: all 0.3s;
			
			&:active {
				opacity: 0.8;
				transform: scale(0.98);
			}
			
			&.btn-next {
				background: #fff;
				color: #007AFF;
				border: 2rpx solid #007AFF;
			}
			
			&.btn-save {
				background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
				color: #fff;
				
				&:disabled {
					background: #ccc;
					box-shadow: none;
					transform: none;
				}
			}
		}
	}
}

/* 按钮通用样式 */
.btn {
	&.btn-small {
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		border: none;
		
		&.btn-primary {
			background: #007AFF;
			color: #fff;
		}
		
		&.btn-secondary {
			background: #fff;
			color: #666;
			border: 2rpx solid #e9ecef;
			
			&:active {
				background: #e9ecef;
			}
		}
		
		&.btn-primary {
			background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
			color: #fff;
			
			&:active {
				opacity: 0.8;
			}
		}
	}
}

/* 已扫描数量样式 */
.scanned-cell {
	.scanned-text {
		font-size: 24rpx;
		color: #007AFF;
		font-weight: bold;
	}
}
</style>
